<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>qq彩贝导航</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
				}
				header{
					white: 2000px;
					height: 100px;
					background: linear-gradient(to bottom,#fff,#F0F0F0);
					padding: 30px 40px;
					box-sizing: border-box;
				}
			header ul{
				list-style: none;
				display: inline-block;
			}
			header div{
				display: inline-block;
			}
			
			header ul li{
				display: inline-block;
				margin-left:20px ;
				
			}
			header ul li a{
				text-decoration: none;
				color: #000000;
				font-size:14px ;
				
			}#d2{
				position: relative;
			}
			#d2 li{
				padding-right:15px ;
				border-right:1px solid #797979 ;
			}
			#d1 img,#d3{
				vertical-align: middle;
			}
			#d1,#d2,#d3{
				margin: 10px 20px;
			}
			#d2 img:first-of-type{
				position: absolute;
				top: -20px;
				left: 20px;
			}
			#d2 img:last-of-type{
				position: absolute;
				top: -20px;
				left: 210px;
			}
			@keyframes hahhaha{
			0%{width: 0;}
			33%{width: 23px;}
			66%{width: 46px;}
			100%{width: 69px;}
			}
			#d2 ul li a{
				position: relative;
			}
			.icon1{
				width: 50px;
				height: 20px;
				display: inline-block;
				position: absolute;
				top: -20px;
				left: 0px;
				background:url(css/header_03.png) 0px 0px no-repeat;
			}
			.icon2{
				width: 50px;
				height: 20px;
				display: inline-block;
				position: absolute;
				top: -20px;
				left: 0px;
				background:url(css/header_07.png) 0px 0px no-repeat;
			}
			#d2 ul li a:hover{
				color: blueviolet;
			}
			#d2 ul li a .icon1:hover{
				animation:hahhaha 0.3s linear both;
				background: url(css/header_05.png) 0px 0px no-repeat;
			}
			#d2 ul li a .icon2:hover{
				animation:hahhaha 0.5s linear both;
				background: url(css/header_09.png) 0px 0px no-repeat;
			}
			#d3 .li1 a img{
				transition: all 2s ease ; 
			}
			#d3 .li1 a img:hover{
				transform: rotate(360deg);
			}
			
				</style>
	</head>
	<body>
		<header>
			<div id="d1">
				<img src="css/logo_170x46.png"/>
			</div>
			<div id="d2">
				<ul>
					<li><a href="#"><span class="icon1"></span>返回商城</a></li>
					<li><a href="#">商旅频道</a></li>
					<li><a href="#"><span class="icon2"></span>积分商城</a></li>
					<li><a href="#">商旅频道</a></li>
					<li><a href="#">了解彩贝</a></li>
					<li><a href="#">彩贝活动</a></li>
					<li><a href="#">个人中心</a></li>
					
				</ul>
				<!--<img class="m1" src="css/header_03.png"/>-->
			<!--<img  class="m2" src="css/header_07.png"/>-->
			</div>
			<div id="d3">
				<ul>
					<li class="li1"><a href="#" ><img src="css/iconsB_11.gif"/></a></li>
					<li><a href="#"><img src="css/iconsB_12.gif"/></a></li>
					<li><a href="#"><img src="css/iconsB_13.png"/></a></li>
				
				</ul>
				
			</div>
			
		</header>
	</body>
</html>
